<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 创建vue实例  初始化渲染 
     1.准备容器
     2.引包（开发版本包、生产版本包）
     3.创建实例
     4.添加配置项 =>完成渲染
     -->

     <div id="app">
        <p>{{ friend.name+friend.desc}}</p>
        <p>{{ count }}</p>
     </div>

     <!-- 引入开发版本包  包含完整注释和警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

     <script>
        //一旦引入VueJS核心包，在全局环境中，就有了Vue构造函数
        const app = new Vue({
            //通过 el 配置选择器，制定Vue控制哪个盒子
            el:'#app',        
            //通过 data 提供数据，该data为响应式数据
            data:{
                msg:"wxl",
                url:"www.baidu.com",
                count:3,
                friend:{
                    name:'ckt',
                    desc:'成功上岸!'
                }
            }
        })
     </script>
</body>
</html>